<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 9.1</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function to draw filled circle ---
        function drawPoint(x, y, radius = 4) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Draw Wires and Components ---

        // 1. Power Supply (12V)
        ctx.fillText('12 V', 230, 30);
        // Terminals
        ctx.beginPath();
        ctx.arc(200, 50, 5, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(260, 50, 5, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Main Wires
        ctx.beginPath();
        // Left wire
        ctx.moveTo(200, 50);
        ctx.lineTo(80, 50);
        ctx.lineTo(80, 100);
        // Right wire
        ctx.moveTo(260, 50);
        ctx.lineTo(420, 50);
        ctx.lineTo(420, 280);
        ctx.stroke();

        // 3. Junction Point and branches
        const junctionX = 80;
        const junctionY = 100;
        drawPoint(junctionX, junctionY); // Junction dot

        // Branch to Resistor
        ctx.beginPath();
        ctx.moveTo(junctionX, junctionY);
        ctx.lineTo(130, junctionY);
        ctx.stroke();

        // Resistor
        ctx.strokeRect(130, 90, 80, 20);

        // Wire from Resistor to Contact C
        ctx.beginPath();
        ctx.moveTo(210, junctionY);
        ctx.lineTo(270, junctionY);
        ctx.lineTo(270, 150);
        ctx.stroke();

        // Branch to Contact B
        ctx.beginPath();
        ctx.moveTo(junctionX, junctionY);
        ctx.lineTo(junctionX, 180);
        ctx.stroke();

        // 4. Switch Contacts A, B, C
        // Contact A
        drawPoint(100, 220);
        ctx.fillText('A', 100, 238);
        // Contact B
        drawPoint(80, 180);
        ctx.fillText('B', 98, 180);
        // Contact C
        drawPoint(270, 150);
        ctx.fillText('C', 270, 132);

        // 5. Motor
        const motorX = 390;
        const motorY = 280;
        const motorRadius = 22;
        ctx.beginPath();
        ctx.arc(motorX, motorY, motorRadius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText('M', motorX, motorY);
        // Wires to Motor
        ctx.beginPath();
        ctx.moveTo(motorX - motorRadius, motorY);
        ctx.lineTo(motorX + motorRadius, motorY);
        ctx.stroke();

        // 6. Switch Arm (X-Y)
        const pivotY_x = 250;
        const pivotY_y = 250;
        const contactX_x = 120;
        const contactX_y = 200;

        // Wire from Motor to Pivot Y
        ctx.beginPath();
        ctx.moveTo(motorX - motorRadius, motorY);
        ctx.lineTo(pivotY_x, motorY);
        ctx.lineTo(pivotY_x, pivotY_y);
        ctx.stroke();

        // Switch Arm
        ctx.beginPath();
        ctx.moveTo(pivotY_x, pivotY_y);
        ctx.lineTo(contactX_x, contactX_y);
        ctx.stroke();

        // Labels for Switch Arm
        ctx.fillText('X', contactX_x - 15, contactX_y);
        ctx.fillText('Y', pivotY_x, pivotY_y + 18);

        // 7. Switch Movement Arc with Arrows
        const arcCenterX = pivotY_x;
        const arcCenterY = pivotY_y;
        const arcRadius = 50;
        const startAngle = 160 * Math.PI / 180;
        const endAngle = 230 * Math.PI / 180;

        ctx.beginPath();
        ctx.arc(arcCenterX, arcCenterY, arcRadius, startAngle, endAngle);
        ctx.stroke();

        // Arrowhead at start of arc
        const arrowSize = 8;
        let arrowAngle = startAngle - Math.PI / 2; // Tangent direction
        let x1 = arcCenterX + arcRadius * Math.cos(startAngle);
        let y1 = arcCenterY + arcRadius * Math.sin(startAngle);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + arrowSize * Math.cos(arrowAngle - Math.PI / 6), y1 + arrowSize * Math.sin(arrowAngle - Math.PI / 6));
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + arrowSize * Math.cos(arrowAngle + Math.PI / 6), y1 + arrowSize * Math.sin(arrowAngle + Math.PI / 6));
        ctx.stroke();

        // Arrowhead at end of arc
        arrowAngle = endAngle + Math.PI / 2; // Tangent direction
        let x2 = arcCenterX + arcRadius * Math.cos(endAngle);
        let y2 = arcCenterY + arcRadius * Math.sin(endAngle);
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 + arrowSize * Math.cos(arrowAngle - Math.PI / 6), y2 + arrowSize * Math.sin(arrowAngle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 + arrowSize * Math.cos(arrowAngle + Math.PI / 6), y2 + arrowSize * Math.sin(arrowAngle + Math.PI / 6));
        ctx.stroke();


        // 8. Figure Caption
        ctx.fillText('Fig. 9.1', 250, 380);

    </script>
</body>
</html>